<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" content="m.178hui.com" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="css/style.css"/>
  <link rel="stylesheet" href="LCalendar/css/LCalendar.css"/>
  <link rel="stylesheet" href="css/media.css"/>
  <style type="text/css">
    body{
      background: #fff;
    }
  </style>
</head>
<body>
  <div class="order" id="order">
    <div class="top_title">
      <i class="u-arrow u-arrow-left" @click="history.go(-1)"></i>
      <h2 class="title">我的订单</h2>
    </div>
    <div class="orderContent">
      <div v-show="orderList == '' " class="no_order">
        <div class="no_order_img">
          <img src="images/cartIcon.png"/>
        </div>
        <div class="no_order_text">
          <div class="no_text_div">您还未预定任何门票</div>
          <a class="no_text_a" href="index.html">现在去预订</a>
        </div>
      </div>
      <div class="order-wrapper" v-show="orderList != '' ">
        <div class="order_top">
          <div class="order_top_text">
            <span class="ordertime">订单时间</span>
            <img class="jtIcon" src="images/jtdown.png"/>
            <img class="jtIcon" src="images/jtup.png"/>
          </div>
          <div class="order_top_time">
            <input class="start_time selectTime" readonly="readonly" v-model="startdata" type="text" />
            <span class="input_span">-</span>
            <input  class="end_time selectTime" v-on:input="change"  readonly="readonly" v-model="enddata" type="text" />
          </div>
        </div>
        <div class="order_con">
          <div class="order_con_list" v-for="item in orderList">
            <a :href="'ticketOrderdetail.html?id='+item.type">
              <div class="orderListTitle">订单号：{{item.orderNum}}</div>
              <div class="orderType">
                <div class="orderType_text">
                  <img v-if="item.type=='1'" class="typeIcon" src="images/yticket.png"/>
                  <img v-if="item.type=='2'" class="typeIcon" src="images/tticket.png"/>
                  <img v-if="item.type=='3'" class="typeIcon" src="images/toticket.png"/>
                  {{item.ticketName}}
                </div>
                <div class="orderType_nuit">
                  <span>{{item.ticketPrice}}元/张</span>
                  <span>×</span>
                  <span>{{item.num}}</span>
                </div>
              </div>
              <div class="order_tip_total">
                <div class="order_tip">{{item.ticketTip}}</div>
                <div class="order_total">
                  <span class="money_logo">￥</span>
                  <b>{{item.total}}</b>
                </div>
              </div>
            
            <div class="order_voucher">
              <div class="order_voucher_btn" v-bind:class="{ 'yrticket':item.type=='1'}">电子入场劵</div>
            </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="order_footer">
    <div class="order_footer_btn">
      <a href="tel:400-6238086" class="lxkf">联系客服</a>
      <a class="myOrder">我的订单</a>
    </div>

  </div>

</body>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/laydate/laydate.js"></script>
 <script src="LCalendar/js/LCalendar.min.js"></script>  <!-- 日期选择 -->
<script>

  new Vue({
    el:'#order',
    data(){
      return {
        orderList:[
          {id:1,type:'1',orderNum:'1646464356',ticketName:"一日票",ticketPrice:"30",num:"3",ticketTip:"一张票仅限一人一日进入",total:"90",imgIcon:'images/'},
          {id:2,type:'2',orderNum:'4564648496',ticketName:"团体票",ticketPrice:"70",num:"1",ticketTip:"一张票仅限同一企业三人进入",total:"70"},
          {id:3,type:'3',orderNum:'23131331',ticketName:"展会通票",ticketPrice:"360",num:"1",ticketTip:"一张票仅限同一人展销期内进入",total:"360"}
        ],
        startdata:'',
        enddata:''
      }

    },
    created(){

    },
     mounted: function () {
      /*lay('.selectTime').each(function(){
        laydate.render({
          elem: this
          ,trigger: 'click'
        });
      }); */
    
    var calendar = new LCalendar();
    calendar.init({
      'trigger': '.start_time', //标签id
      'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
      'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期
      'maxDate': (new Date().getFullYear()+10) + '-' + 12 + '-' + 31 //最大日期
    });
    var calendar = new LCalendar();
    calendar.init({
      'trigger': '.end_time', //标签id
      'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
      'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期
      'maxDate': (new Date().getFullYear()+10) + '-' + 12 + '-' + 31 //最大日期
    });
    },
    methods:{
      change(){
        if(this.startdata != "" && this.enddata !=""){
          console.log(this.startdata,"-",this.enddata)
        }
      }
      
   
    }


  })
</script>
</html>
